<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>图文详情</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/circle.css">
    
    <style>
       html,body{
           background: transparent;
       }
    </style>
</head>

<body style="height: 100%;">
    <div class="app"" v-cloak>
        <!-- 按钮区 -->
        <div class="circle-comment-fixed-btns circle-comment-fixed-blackBac">
            <!-- 发表评论 -->
            <div class="circle-comment-search-btn " @click="handleComment">说点什么吧~
            </div>
            <!-- 分享 -->
            <!-- @click="handleShare" -->
            <div class="circle-comment-share-btn">{{detailData.forwardNumber}}
            </div>
            <!-- 点赞 -->
            <div class="circle-comment-thumpup-btn" :class="[detailData.likeFlag ? 'active': '']" @click="handleThumpUp(detailData)">{{detailData.likeNumber}}
            </div>
            <!-- 评论 -->
            <!-- @click="handleComment" -->
            <div class="circle-comment-speak-btn" @click="handleComment">{{detailData.commentNumber}}
            </div>
        </div>

    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/restful.js"></script>
    <script>
        apiready = function () {
            const subStrLength = 46
            // api.alert({
            //     msg: api.pageParam
            // })
            vm = new Vue({
                el: '.app',
                data(){
                    return {
                        detailData: {
                            attentionFlag: 0, // 关注状态 -1: 本人 0: 未关注 1: 关注
                            auditStatus: 0, // 审核状态 0: 待审核 1: 通过 2: 驳回
                            channelId: 0, // 频道ID
                            commentNumber: 1234, // 评论数量
                            content: '这里是详情内容', // 动态内容
                            forwardNumber: 0, // 转发数量
                            headImg: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', // 发布用户头像
                            hitNumber: 10, // 单击数量
                            likeFlag: false, // 是否点赞
                            likeNumber: 0, // 点赞数量
                            location: '', // 定位经纬度 格式: lon, lat
                            medias: [
                                {
                                    imagePath: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', // 图片地址
                                    mediaType: '', // 资源类型 0: 图片 1: 视频
                                    sequence: 0, // 资源顺序
                                    videoId: '', // videoID
                                    videoPath: '' // vedio路径
                                }
                            ],
                            nickName: '经典说车', // 发布用户昵称
                            publishTime: '', // 发布时间
                            sort: 0, // 排序
                            title: '', // 发布标题
                            topicId: 0, 
                            type: 0, // 类型 0: 图文 1: 视频
                            userId: 0 // 用户id
                        },
                    }
                },
                created() {
                   
                },
                mounted() {
                    const footH = $api.offset( $api.dom('.circle-comment-fixed-btns')).h
                    api.sendEvent({
                        name: 'listeneFootHeight',
                        extra: {
                            height: footH
                        }
                    });
                },
                methods: {
                    // 打开评论列表
                    handleComment(){
                        api.sendEvent({
                            name: 'openCommentFrame'
                        });
                    },

                    // 动态 点赞/取消点赞
                    handleThumpUp(item){
                        var vm = this;
                        circle("doThumb")(item, function(ret) {
                           api.sendEvent({
                               name:'initDetail'
                           })
                            item.likeFlag = !item.likeFlag;
                            if (item.likeFlag === true) {
                                item.likeNumber += 1;
                                toastMiddle('点赞成功')
                            } else {
                                item.likeNumber -= 1;
                                toastMiddle('取消点赞')
                            }
                        })
                    },
                }

            })
        }
    </script>
</body>

</html>